<!-- 一键登录 -->
<template>
  <view class="bd-onelogin">
    <view class="bd-onelogin-group">
      <view class="bd-onelogin-btn" @click="onelogin">本机号码一键登入</view>
      <view class="bd-onelogin-btn" @click="routerGo">其他号码手机登入</view>
    </view>
    <view class="bd-agree-group dir-left-nowrap cross-center" >
      <view class="bd-agree">登入及表示同意
        <text @click="toRule('agreement')" class="bd-color">《隐私政策》</text>
        <text>和</text>
        <text @click="toRule('declare')" class="bd-color">《服务条款》</text>
      </view>
    </view>
    <view class="bd-bg"></view>
  </view>
</template>

<script>
// import '../../static/js/oneloginh5.js';
export default {
  name: "onelogin",
  data() {
    return {
      initOlinstance: null
    }
  },
  onShow() {},
  methods: {
    // 一键登录
    onelogin() {
      let that = this;
      // 可提前判断网络状态 决定是否初始化H5一键登录
      let nettype = that.getNetworkType();
      // 根据客户业务进行判断 网络判断返回 cellular、 wifi、 unknown
      if (nettype === 'wifi') {
        // 可选方案：
        // 1: 提示用户关闭wifi 进行体验
        // 2: 直接降级走其他验证形式
        uni.showModal({
          title: '一键登录',
          content: '请先关闭wifi，或者其他方式登入',
          showCancel: false,
        })
      } else {
        console.log(11111111111)
        // stpe3: 初始化H5一键登录
        that.initOlinstance = that.initOl();
      }
      // 调用H5一键登录
      if (!that.initOlinstance) {
        // 降级走其他验证方式
      }
      // step5: 调用H5 一键登录
      that.initOlinstance && that.initOlinstance.gateway();
    },
    // 判断网络
    getNetworkType(){
      var common_cell = ['cellular', '2g', '3g', '4g', '5g','3G/2G'];
      var user_agent = navigator.userAgent.toLowerCase();
      var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection ||{type: 'unknown'};
      var type;
      // 判断是否是微信内置浏览器
      var isWeixin = /micromessenger/.test(user_agent);
      if(isWeixin) {
        if(user_agent.indexOf('nettype') !== -1){
          type = user_agent.match(/nettype\/\w+/) ? user_agent.match(/nettype\/\w+/)[0] : 'nettype/unknow';
          type = type.replace('nettype/', '')
        }else {
          var weixinType = {"network_type:wifi":"wifi","network_type:edge":"3G/2G","network_type:fail":"fail","network_type:wwan":"3G/2G"}
          document.addEventListener("WeixinJSBridgeReady",function onBridgeReady(){
            WeixinJSBridge.invoke('getNetworkType',{},function(e){
              type = weixinType[e.err_msg];
            });
          });
        }
      }else {
        type = (connection && connection.type) || 'unknown';
      }
      console.log(type,222222)
      // 对type 做统一处理
      if(type && common_cell.indexOf(type) !== -1){
        return 'cellular'
      }else if ( type === 'wifi'){
        return 'wifi'
      }
      return 'unknown'
    },
    initOl() {
      let olinstance = new GOL({
        app_id: '6ea14be4daed57b5696f3f6886abf5fb', // 填写您在后台申请已审核通过的 appID
        app: '爱添米',
        logo:'https://demo.leyi888.cn/web/uploads/mall1/20210724/944d7ff3de913de954e5cd834e8978b7.jpg',
      });
      // step4: 成功失败回调
      olinstance.onTokenFail((e)=> {
        // 获取token失败 走降级处理 走短信或者其他登录方式 用户可根据业务做不同判断
        console.log(e.code)
      }).onTokenSuccess((e) => {
        console.log(e.code) // e：获取token成功后返回object包含： {token: '', phone: '', process_id: ''}
        const data = {
          app_id: '6ea14be4daed57b5696f3f6886abf5fb', // 填写您在后台申请已审核通过的 appID
          ...e // 获取token成功后的数据 包含了 token, phoen ,process_id
        }
        this.$request({
          url: this.$api.registered.signs,
          method: "post",
          data: data, // 参数
        }).then(data => {
          // 本机校验成功
        }).catch(data => {
          // 本机校验失败
          olinstance.destory()
        });
      })
      return olinstance
    },
    // 其它手机号登入
    routerGo() {
      uni.navigateTo({
        url:'/pages/registered/sign'
      });
    },
    // 隐私和条款
    toRule(string) {
      let title = string == 'agreement' ? this.detail.agreement_name : this.detail.declare_name;
      uni.navigateTo({
        url: `/pages/rules/index?url=${encodeURIComponent(this.$api.registered.register_data)}&key=` + string + `&title=` + title,
      });
    },
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: white;
}
.bd-onelogin {
  .bd-onelogin-group {
    width: 100%;
    position: fixed;
    top: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .bd-onelogin-btn {
      width: 560upx;
      margin: 38upx auto 0;
      height: 84upx;
      line-height: 84upx;
      color: #ffffff;
      font-size: 36upx;
      border-radius: 42upx;
      text-align: center;
      box-shadow: 0px 8upx 12upx #F4C3BF;
      background: #DE4335;

      &:nth-child(2){
        color: #333333;
        box-shadow: 0px 8upx 12upx #F1F1F1;
        background: #F6F6F6;
      }
    }
  }

  .bd-agree-group {
    width: 100%;
    position: fixed;
    bottom: 50upx;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #999999;
    font-size: 22upx;

    .bd-agree {
      width: 100%;
    }

    .bd-color {
      color: #EA445C;
      font-size: 22upx;
    }
  }
  .bd-bg {
    width: 616upx;
    height: 492upx;
    position: fixed;
    left: 0;
    bottom: 0;
    background-image: url("../../static/image/login_bg.png");
    background-repeat: no-repeat;
    background-size: 616upx 492upx;
  }
}
</style>